<template>
  <view>
    <z-paging
      ref="paging"
      v-model="dataList"
      bg-color="#fff"
      auto-show-system-loading
      @query="getList"
    >
      <view slot="top">
        <u-search
          height="92rpx"
          searchIconColor="#4b3138"
          :showAction="false"
          placeholder="搜索订单"
          margin="0 28rpx "
          v-model="keyword"
          @search="searchFocus"
        ></u-search>
        <view style="padding: 0 24rpx">
          <u-tabs
            :list="tabs"
            :current="current"
            lineColor="#000"
            :activeStyle="{
              fontSize: '28rpx',
              color: '#000',
            }"
            :inactiveStyle="{
              fontSize: '28rpx',
            }"
            itemStyle="height: 88rpx;"
            @click="clickTabs"
          ></u-tabs>
        </view>
      </view>
      <view slot="empty">
        <Empty />
      </view>
      <view class="content">
        <view
          class="item"
          v-for="(item, index) in dataList"
          :key="index"
          @click="toOrderDetail(item)"
        >
          <view class="item-num">
            <view class="order-num">订单编号：{{ item.id }}</view>
			<view class="order-num">{{ item.orderType==1?'商城订单':'云仓自提' }}</view>
            <view class="order-type">{{ item.orderStatusName }}</view>
			
          </view>
          <view
            v-for="(childItem, childIndex) in item.appletBdmOrderItemVos"
            :key="childIndex"
          >
            <view class="flex m-20">
              <view class="order-img">
                <image
                  style="width: 100%; height: 100%"
                  :src="baseImgUrl + childItem.goodImg"
                  mode=""
                ></image>
              </view>
              <view class="order-content">
                <view class="item-title">{{ childItem.goodName }}</view>
                <view class="item-title1 m-33"
                  >规格：{{ childItem.goodSpecs || "无规格" }}</view
                >
                <view class="item-price">
                  <view>￥{{ childItem.goodPrice }}</view>
                  <view>X {{ childItem.goodCount }}</view>
                </view>
              </view>
            </view>
            <view class="btn-flex">
              <template v-if="item.orderStatus == 0">
                <view
                  class="btn-black"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  @click.stop="cancelOrder(item.id)"
                  >取消订单</view
                >
                <view
                  class="btn-red"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  @click.stop="toPay(item)"
                  >去付款</view
                >
              </template>
              <template v-if="item.orderStatus == 1">
                <view
                  class="btn-black"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  @click.stop="toggle(item.payMoney, item.id)"
                  >我要退货</view
                >
              </template>
              <template v-if="item.orderStatus == 2">
                <view
                  class="btn-black"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  @click.stop="toggle(item.payMoney, item.id, item.orderStatus)"
                  >我要退货</view
                >
                <view
                  class="btn-black"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  @click.stop="toLogistics(item.id)"
                  >查看物流</view
                >
                <view
                  class="btn-red"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  @click.stop="receivingGoods(item.id)"
                  >确认收货</view
                >
              </template>
              <template v-if="item.orderStatus == 4">
                <view
                  class="btn-black"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  @click.stop="toLogistics(item.id)"
                  >查看物流</view
                >
                <view
                  class="btn-grey"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  >已收货</view
                >
                <view
                  class="btn-red"
                  v-if="
                    childIndex == item.appletBdmOrderItemVos.length - 1 &&
                    item.appletBdmOrderItemVos[0].ifEvaluate == 2
                  "
                  @click.stop="toEvaluate(childItem)"
                  >去评价</view
                >
              </template>
              <template v-if="item.orderStatus == 5 || item.orderStatus == 7">
                <view
                  class="btn-black"
                  v-if="childIndex == item.appletBdmOrderItemVos.length - 1"
                  @click.stop="
                    toSchedule(item.id, item.payMoney, item.orderStatus)
                  "
                  >查看进度</view
                >
              </template>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <uni-popup
      ref="popup"
      background-color="rgba(0,0,0,0)"
      :safeArea="false"
      type="bottom"
    >
      <view class="popup-content">
        <view class="popup-title">退货申请</view>
        <view class="popup-flex">
          <view class="flex">
            <view class="popup-text">退货原因</view>
            <view class="popup-text1">*</view>
          </view>
          <input
            class="popup-input"
            v-model="refundReason"
            type="text"
            placeholder="请输入"
          />
        </view>
        <view class="popup-flex">
          <view class="flex">
            <view class="popup-text">退款金额</view>
            <view class="popup-text1">*</view>
          </view>
          <view>￥{{ payMoney }}</view>
        </view>
        <view class="submit" @click="chargeback">提交申请</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import orderApi from "@/api/order";
import { filterEnum } from "@/utils/index";
import { baseImgUrl } from "@/config";

export default {
  name: "myOrder",
  data() {
    return {
      baseImgUrl,
      keyword: "",
      tabs: [
        {
          name: "全部",
        },
        {
          name: "待付款",
        },
        {
          name: "待发货",
        },
        {
          name: "待收货",
        },
        {
          name: "待评价",
        },
        {
          name: "已退单",
        },
        {
          name: "已关闭",
        },
        {
          name: "退货中",
        },
      ],
      status: "loadmore",
      orderStatusEnum: [
        {
          value: 0,
          name: "待付款",
        },
        {
          value: 1,
          name: "待发货",
        },
        {
          value: 2,
          name: "已发货",
        },
        {
          value: 3,
          name: "待收货",
        },
        {
          value: 4,
          name: "已完成", //
        },
        {
          value: 5,
          name: "已退单",
        },
        {
          value: 6,
          name: "已关闭",
        },
        {
          value: 7,
          name: "退货中",
        },
      ],
      // 订单状态传参
      orderStatusList: [
        {
          index: 0,
          value: "",
        },
        {
          index: 1,
          value: 0,
        },
        {
          index: 2,
          value: 1,
        },
        {
          index: 3,
          value: 2,
        },
        {
          index: 4,
          value: 4,
        },
        {
          index: 5,
          value: 5,
        },
        {
          index: 6,
          value: 6,
        },
        {
          index: 7,
          value: 7,
        },
      ],
      current: 0,
      activeColor: "#000",
      styleType: "text",
      dataList: [],
      paramsCurrent: "", //传值orderStatus
      mainHeight: "",
      refundReason: "", // 退货原因
      payMoney: 0, // 订单金额
      orderStatus: null, // 订单状态
      orderId: null, // 订单id
    };
  },
  onLoad(options) {
    if (options.status == "") {
      this.current = 0;
    } else {
      this.current = options.status;
    }
    this.mainHeight =
      this.$store.getters.heightData.noTabMainHeight - 90 + "px";
  },
  onShow() {
	  this.getList(1,10)
  },
  methods: {
    searchFocus() {
      this.$refs.paging.reload();
    },
    getList(pageNum, pageSize) {
      if (this.current == 0) {
        this.paramsCurrent = "";
      } else {
        this.paramsCurrent = this.orderStatusList.find(
          (el) => el.index == this.current
        ).value;
      }
      let params = {
        pageNum,
        pageSize,
        orderStatus: this.paramsCurrent,
        goodNames: this.keyword,
      };
      if (this.keyword == "") {
        delete params.orderId;
      }
      orderApi
        .getOrderList(params)
        .then((res) => {
          if (res.code == 200) {
            let list = res.rows.map((item) => {
              return {
                ...item,
                orderStatusName: filterEnum(
                  item.orderStatus,
                  this.orderStatusEnum
                ),
              };
            });
            this.$refs.paging.complete(list);
          }
        })
        .catch(() => {
          this.$refs.paging.complete(false);
        });
    },
    clickTabs(e) {
      if (this.current !== e.index) {
        this.current = e.index;
        if (e.index == 0) {
          this.paramsCurrent = "";
        }
        this.paramsCurrent = this.orderStatusList.find(
          (el) => el.index == e.index
        ).value;
        this.$refs.paging.reload();
      }
    },
    toOrderDetail(status) {
      uni.navigateTo({
        url: `/subPages/myOrder/detail?id=${status.id}`,
      });
    },
    cancelOrder(id) {
      uni.showModal({
        title: "提示",
        content: "确认取消该订单吗？",
        cancelText: "取消",
        confirmText: "确定",
        success: (modalRes) => {
          if (modalRes.confirm) {
            let data = {
              orderId: id,
            };
            orderApi.cancelOrder(data).then((res) => {
              if (res.code == 200) {
                uni.showToast({
                  title: "取消成功！",
                  icon: "none",
                });
                this.$refs.paging.reload();
              }
            });
          }
        },
      });
    },
    toPay(item) {
      uni.navigateTo({
        url: `/subPages/details/confirmOrder?source=order&orderId=${item.id}&id=${item.appletBdmOrderItemVos[0].supplierGoodId}&integral=${item.appletBdmOrderItemVos[0].deductIntegral}&price=${item.appletBdmOrderItemVos[0].price}`,
      });
    },
    toggle(payMoney, orderId, orderStatus) {
      // 保存订单金额 订单编号 订单状态 传递到退货详情
      this.payMoney = payMoney;
      this.orderId = orderId;
      this.orderStatus = orderStatus;
      this.$refs.popup.open();
    },
    toLogistics(id) {
      uni.navigateTo({
        url: `/subPages/myOrder/logistics?id=${id}`,
      });
    },
    receivingGoods(id) {
      let data = {
        orderId: id,
      };
      orderApi.receivingGoods(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "收货成功！",
            icon: "none",
          });
          this.$refs.paging.reload();
        }
      });
    },
    chargeback() {
      if (this.refundReason == "") {
        uni.showToast({
          title: "请输入退货原因",
          icon: "none",
        });
        return;
      }
      let data = {
        chargebackReason: this.refundReason,
        orderId: this.orderId,
        serviceType: 1,
      };
      orderApi.chargeback(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "退货申请成功",
            icon: "none",
          });
          setTimeout(() => {
            this.$refs.popup.close();
            uni.navigateTo({
              url: `/subPages/myOrder/returnDetails?id=${this.orderId}&payMoney=${this.payMoney}&orderStatus=${this.orderStatus}`,
            });
            this.refundReason = "";
            this.orderId = null;
          }, 1000);
        }
      });
    },
    toEvaluate(item) {
      uni.navigateTo({
        url: `/subPages/myOrder/evaluate?orderId=${item.orderId}&itemId=${item.id}&goodId=${item.supplierGoodId}`,
      });
    },
    toSchedule(id, payMoney, orderStatus) {
      uni.navigateTo({
        url: `/subPages/myOrder/returnDetails?id=${id}&payMoney=${payMoney}&orderStatus=${orderStatus}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.m-20 {
  margin: 20rpx 0;
}

.m-33 {
  margin: 33rpx 0;
}

.content {
  margin-top: 40rpx;
  padding: 0 24rpx;

  .item {
    width: 698rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #efefef;
    margin-bottom: 40rpx;

    .item-num {
      display: flex;
      justify-content: space-between;

      .order-num {
        color: #000000;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: 0.5;
      }

      .order-type {
        color: #ff4254;
        text-align: right;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }

    .order-img {
      width: 180rpx;
      height: 180rpx;

      image {
        border-radius: 24rpx;
      }
    }

    .order-content {
      width: calc(100% - 208rpx);
      margin-left: 28rpx;

      .item-title {
        color: #000000;
        font-family: "PingFang SC";
        font-size: 28rpx;
        font-style: normal;
        font-weight: 500;
        line-height: 40rpx;
        opacity: 0.9;
      }

      .item-title1 {
        color: #000000;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: 0.5;
      }

      .item-price {
        display: flex;
        justify-content: space-between;
      }
    }

    .btn-flex {
      display: flex;
      justify-content: flex-end;

      .btn-red {
        color: #ffffff;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: 0.9;
        border-radius: 8rpx;
        background: #ff4254;
        width: 140rpx;
        height: 58rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 40rpx;
      }

      .btn-black {
        width: 140rpx;
        height: 58rpx;
        border-radius: 8rpx;
        border: 2rpx solid #121212;
        color: #000000;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: 0.9;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 40rpx;
      }

      .btn-grey {
        width: 140rpx;
        height: 58rpx;
        border-radius: 8rpx;
        border: 2rpx solid #121212;
        color: #000000;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 40rpx;
      }
    }
  }
}

.popup-content {
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background: #fff;
  padding-bottom: 34rpx;
  padding-top: 40rpx;

  .popup-title {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .popup-flex {
    display: flex;
    justify-content: space-between;
    padding: 0 28rpx;
    margin-top: 60rpx;

    .popup-text {
      color: #000000;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-style: normal;
      font-weight: 500;
      line-height: 40rpx;
    }

    .popup-text1 {
      color: red;
    }

    .popup-input {
      text-align: right;
    }
  }

  .submit {
    width: 642rpx;
    height: 100rpx;
    flex-shrink: 0;
    border-radius: 50rpx;
    background: #121212;
    margin: 0 auto;
    margin-top: 475rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
  }
}
</style>
